const SystemInfo = wx.getSystemInfoSync()

console.log(SystemInfo)

const HOST = 'https://www.xxxxxx.com' // 换成自己的白名单域名

Page({
  data: {
    availWidth: SystemInfo.windowWidth,
    keys: { label: 'name', value: 'index' },
    prizeList: [
      {
        index: 0,
        name: '一等奖一等奖一等奖',
        pic: HOST + '/gifs1.png',
        id: 1,
        message: '恭喜！你中了一等奖！'
      },
      {
        index: 0,
        name: '二等奖二等奖二等奖',
        pic: HOST + '/gifs2.png',
        id: 2,
        message: '恭喜！你中了二等奖！'
      },
      {
        index: 0,
        name: '三等奖三等奖三等奖',
        pic: HOST + '/gifs3.png',
        id: 3,
        message: '恭喜！你中了三等奖！'
      },
      {
        index: 0,
        name: '4号4号4号4号4号4号',
        pic: HOST + '/gifs.png',
        id: 4,
        message: '恭喜！你中了4号奖！'
      },
      {
        index: 0,
        name: '5号5号5号5号5号5号',
        pic: HOST + '/gifs.png',
        id: 5,
        message: '恭喜！你中了5号奖！'
      },
      {
        index: 0,
        name: '6号6号6号6号6号6号',
        pic: HOST + '/gifs.png',
        id: 6,
        message: '恭喜！你中了6号奖！'
      },
      {
        index: 0,
        name: '7号7号7号7号7号7号',
        pic: HOST + '/gifs.png',
        id: 7,
        message: '恭喜！你中了7号奖！'
      },
      {
        index: 0,
        name: '8号8号8号8号8号8号',
        pic: HOST + '/gifs.png',
        id: 8,
        message: '恭喜！你中了8号奖！'
      },
      {
        index: 0,
        name: '9号9号9号9号9号9号',
        pic: HOST + '/gifs.png',
        id: 9,
        message: '恭喜！你中了9号奖！'
      },
      {
        index: 0,
        name: '10号10号10号10号10号10号',
        pic: HOST + '/gifs.png',
        id: 10,
        message: '恭喜！你中了10号奖！'
      }
    ],
    Visible: false,
    isRunning: false,
    runAnimation: null,
    luckyIndexArr: [],
    baseRunAngle: 360 * 8, // 动画圈数
    luckyIndex: 0, // 模拟中奖下标
    prizeInfo: {}, // 中奖奖品信息
    transitionTime: 12, // 动画时长
    conicGradient: [], // 每个奖项的初始旋转角度
    rotateAngle: 0, // 每份的平均角度
    amendRotate: 0, // 初始化的修正角度
    prizeItemWidth: 0 // 每个奖项的宽度
  },
  onLoad() {
    this.initLine()
  },
  luckyConfirm(e) {
    const { value } = e.detail
    this.setData({
      luckyIndex: value[0],
      luckyIndexArr: value,
      Visible: false
    })
  },
  luckyCancel(e) {
    this.setData({
      Visible: false
    })
  },
  onWithoutTitlePicker() {
    this.setData({ Visible: true })
  },
  lotteryProbability() {
    const index = this.data.luckyIndex
    // 模拟后台返回中奖信息
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(this.data.prizeList[index])
      }, 400)
    })
  },
  findIndexById(arr, id, idKey = 'id') {
    for (let i = 0; i < arr.length; i++) {
      if (arr[i][idKey] === id) return i
    }
    return -1
  },
  totalRunAngle() {
    const index = this.findIndexById(
      this.data.prizeList,
      this.data.prizeInfo.id,
      'id'
    )
    const totalRunAngle =
      this.data.baseRunAngle +
      360 -
      index * this.data.rotateAngle +
      this.data.amendRotate
    console.log(totalRunAngle)

    return totalRunAngle
  },
  stopRun() {
    console.log('动画执行结束')
    const rotate = this.totalRunAngle()
    const runAnimation = `transform: rotate(${
      rotate - this.data.baseRunAngle
    }deg);`
    this.setData({
      isRunning: false,
      runAnimation: runAnimation
    })
  },
  async luckyStart() {
    if (!this.data.isRunning) {
      console.log('luckyRun')
      this.setData({
        isRunning: true
      })
      console.log('开始抽奖，后台请求中奖奖品')
      const prizeInfo = await this.lotteryProbability()
      console.log('中奖ID>>>', JSON.parse(JSON.stringify(prizeInfo)))
      this.setData({
        prizeInfo: prizeInfo
      })
      this.startRun()
    }
  },
  startRun() {
    const rotate = this.totalRunAngle()
    const duration = this.data.transitionTime
    const runAnimation = `transform: rotate(${rotate}deg);transition: transform ${duration}s;`
    this.setData({
      runAnimation: runAnimation
    })
  },
  initLine() {
    const DEG = 360

    if (this.data.prizeList.length) {
      const count = DEG / this.data.prizeList.length
      let STYLE = []
      for (let i = 0; i < this.data.prizeList.length; i++) {
        const item = this.data.prizeList[i]
        this.setData({
          [`prizeList[${i}].index`]: i,
          [`prizeList[${i}].id`]: Number(item.id)
        })
        const start = (i + 1) * count - count
        const end = (i + 1) * count
        STYLE.push(start)
      }

      const prizeItemWidth =
        2 *
        this.data.availWidth *
        0.95 *
        Math.sin(((count / 2) * Math.PI) / 180)
      this.setData({
        amendRotate: count / 2,
        rotateAngle: count,
        conicGradient: STYLE,
        prizeItemWidth: prizeItemWidth
      })
    }
  }
})
